<template>
  <section class='f-register-success'>
    <img class="f-img1" src="@/assets/imgs/icon_order_accepted.png" alt="">
    <p class="f-text">商户代注册成功!</p>

    <ul class="f-card">
      <li>
        <p>店铺名称：</p>
        <p>{{formData.shopName}}</p>
      </li>
      <li>
        <p>店铺联系人：</p>
        <p>{{formData.contactsName}}</p>
      </li>
      <li>
        <p>登录账号：</p>
        <p>{{formData.loginAccount}}</p>
      </li>
      <li>
        <p>登录密码：</p>
        <p>{{formData.firstPassword}}(初始密码)</p>
      </li>
    </ul>

    <div class="f-tips">
      <p>温馨提示：</p>
      <p>请告知代注册的商户实名认证需提前在手机上下载并安装支付宝app，并登录与店铺联系人一致的支付宝实名账号进行认证。</p>
    </div>

    <div class="f-btn-box">
      <van-button :icon="icon" round block type="primary" @click="showShare = true">
        <p class="f-ml-10">分享给代注册商户</p>
      </van-button>
      <van-button class="f-mt-30" plain round block type="primary" :loading="loading " @click="openPopup">现在去实名</van-button>
    </div>

    <van-popup v-model:show="showCenter" round :style="{ padding: '34px 64px' }">
      <div class="f-mb-15" style="font-size:16px">
        <p>请代注册商户</p>
        <p class="f-mt-05">使用支付宝APP扫一扫</p>
      </div>
      <qrcode-vue :value="qrUrl" :size="150" level="H" />
    </van-popup>

    <van-share-sheet v-model:show="showShare" :options="shareOptions" @select="onSelect" />

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import QrcodeVue from 'qrcode.vue'
import api from '../api'
import { successDeal } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'

export default {
  components: { QrcodeVue },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      icon: require('../../../assets/icons/jhh_icon_share.png'),
      formData: {},
      loading: false,
      showCenter: false,
      qrUrl: '',

      showShare: false,
      shareOptions: [
        { name: '微信', icon: 'wechat' },
        { name: '复制链接', icon: 'link' },
      ]
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '商户代注册',
        show: true,
        left: true,
        leftType: 'cross',
        right: false,
        rightType: 'search',
      });

      state.formData = route.query
    })

    const openPopup = () => {
      state.loading = true
      let json = {
        "idcardName": state.formData.contactsName,
        "idcardNum": state.formData.certificateNumber,
        "shopId": state.formData.shopId,
        "source": 1
      }
      api.signQrCode(json).then(res => {
        state.loading = false
        state.qrUrl = res.data.qrUrl
        state.showCenter = true
      }).catch(err => {
        state.loading = false
      })
    }

    const onSelect = (option) => {
      let { shopName, contactsName, loginAccount, firstPassword } = state.formData
      let url = `${location.origin}${location.pathname}#/share?shopName=${shopName}&contactsName=${contactsName}&loginAccount=${loginAccount}&firstPassword=${firstPassword}`
      console.log(url)
      if (option.name == '复制链接') {
        handleCopy(url)
      }
      if (option.name == '微信') {
        const data = {
          type: "wechat_session",
          url: url,
          key: "wx55467dbaf8847c2d",
          title: '淏咖宝',
          description: '测试内容'
        }
        JsBridge.callHandler('share', data, (res) => {
          console.log('share 响应值 ： ', res);
        })
      }

      state.showShare = false;
    };

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    return {
      ...toRefs(state),
      openPopup,
      onSelect
    }
  }
}
</script>
<style lang='scss' scoped>
.f-register-success {
  padding: 32px 51px;
  text-align: center;
  .f-img1 {
    width: 147px;
    height: 120px;
  }
  .f-text {
    font-size: 19px;
    color: #2e77ee;
    margin: 30px 0;
  }
  .f-card {
    width: 274px;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 0;
    li {
      display: flex;
      margin: 10px 0;
      p:first-child {
        width: 90px;
        text-align: right;
        font-size: 12px;
        color: #666666;
        margin-right: 9px;
      }
    }
  }
  .f-tips {
    text-align: left;
    font-size: 10px;
    color: #ff2b2b;
    margin-top: 8px;
  }
  .f-btn-box {
    margin-top: 54px;
  }
}
</style>